<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/header :: header}">
</head>
<link href="../../css/verify.css" th:href="@{/css/verify.css}" rel="stylesheet">
    <body>
		<div class="container blog-content-container">
			<div class="row">
				<!-- Blog Entries Column -->
				<div class="col-md-8">
					<!-- Blog Post -->
					<div id="mainContainer">
						<div id="mainContainerRepleace">

							<form  th:action="@{/login}" method="post" onsubmit="return loginCheck()">
								<h2 >请登录</h2>

								<div class="form-group col-md-5">
									<label for="username" class="col-form-label">账号</label>
									<input type="text" class="form-control" id="username" name="username" maxlength="50" placeholder="请输入账号">

								</div>
								<div class="form-group col-md-5">
									<label for="password" class="col-form-label">密码</label>
									<input type="password" class="form-control" id="password" name="password" maxlength="30" placeholder="请输入密码" >
								</div>
								<div class="form-group col-md-5">
									<div id="mpanel4" style="margin-top:30px;"></div>
								</div>
								</div>
								<!--<div class="form-group col-md-5">
									 <input type="checkbox" name="remember-me"> 记住我
								</div>-->
								<div class="form-group col-md-5">
									<button type="submit" class="btn btn-primary">登录</button>
									<button type="button" class="btn btn-info forgetPwd">忘记密码</button>
								</div>
								<div class=" col-md-5" th:if="${loginError}">
									<p class="blog-label-error" th:text="${errorMsg}"></p>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div> <!-- /container -->
		<div th:replace="~{fragments/footer :: footer}">...</div>
		<script src="../../js/verify.js" th:src="@{/js/verify.js}"></script>

		<script>
			var loginFlag = false;
			function loginCheck() {
			    if(!loginFlag){
					$(".verify-bar-area").css("border","1px red solid");
				}
				return loginFlag;
            }

            $('#mpanel4').slideVerify({
                type : 1,		//类型
                vOffset : 5,	//误差量，根据需求自行调整
                barSize : {
                    width : '100%',
                    height : '40px',
                },
                ready : function() {
                },
                success : function() {
                    //alert('验证成功，添加你自己的代码！');
                    //......后续操作
                    $(".verify-bar-area").css("border","1px #5cB85c solid");
                    loginFlag = true;
                },
                error : function() {
//		        	alert('验证失败！');
                }

            });
			$(".forgetPwd").click(function () {
			    window.location.href="/forgetPwd";
            });
		</script>
    </body>
</html>